<template>
  <div style="width: 100%; height: 100%">
    <div class="vxe-top">
      <div>
        <span class="top-1">{{ title }}</span>
        <span class="top-2"
          >共<span style="color: #409eff"
            >&nbsp;{{ state.pageconfig.total }}&nbsp;</span
          >个记录</span
        >
      </div>
      <div class="right-caozuo">
        <div
          style="margin-left: 20px; cursor: pointer"
          v-if="
            router.currentRoute.value.fullPath != '/cx/hjjl' &&
            router.currentRoute.value.fullPath != '/cx/lyjl'
          "
        >
          <el-button @click="addFn" link style="color: #409eff"
            ><el-icon size="18" class="icons iconfont icon-xinzeng"></el-icon>
            新增</el-button
          >
        </div>
        <div
          style="margin-left: 20px; cursor: pointer"
          v-if="
            router.currentRoute.value.fullPath != '/cx/hjjl' &&
            router.currentRoute.value.fullPath != '/cx/lyjl'
          "
        >
          <el-button @click="delAllFn" link
            ><Delete size="18" style="width: 1em; height: 1em; color: red" />
            <span style="color: red; margin-left: 5px">删除</span>
          </el-button>
        </div>
        <div style="cursor: pointer; margin-left: 20px">
          <el-dropdown @command="daochu" ref="dropdown1">
            <div style="display: flex; align-items: center">
              <el-icon
                size="18"
                style="color: rgba(77, 151, 255, 1)"
                class="icons iconfont icon-daochu"
              ></el-icon>
              <div style="color: rgba(77, 151, 255, 1)">导出</div>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="dangqian">导出当前</el-dropdown-item>
                <el-dropdown-item command="quanbu">导出全部</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div style="margin-left: 20px; cursor: pointer">
          <el-dropdown @command="dayin" ref="dropdown1">
            <div style="display: flex; align-items: center">
              <span class="dy">
                <el-icon
                  size="18"
                  style="color: rgba(77, 151, 255, 1)"
                  class="icons iconfont icon-daying"
                ></el-icon>
              </span>
              <div style="color: rgba(77, 151, 255, 1)">打印</div>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="dangqian">打印当前</el-dropdown-item>
                <el-dropdown-item command="quanbu">打印全部</el-dropdown-item>
                <el-dropdown-item command="shezhi">打印设置</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div style="margin-left: 20px">
          <el-button style="color: #409eff" link @click="pageSet">
            <!-- <img
                style="margin-right: 5px"
                src="@/assets/images/设置.png"
                alt=""
              /> -->
            <el-icon
              size="18"
              class="icons iconfont icon-biaogeshezhi"
            ></el-icon>
            表格设置</el-button
          >
        </div>
      </div>
    </div>
    <!-- table表格 -->
    <div :style="{ height: getTableHeight() }">
      <vxe-table
        :data="state.tableData"
        :style="{
          fontSize: state.tableZihao + 'px',
        }"
        :row-style="rowStyle"
        :header-cell-style="headerCellStyle"
        @resizable-change="resizeChange"
        @checkbox-change="checkchange"
        @checkbox-all="checkall"
        use-key
        :border="state.tableBorder ? true : 'false'"
        :cell-config="{ height: state.tableHeight }"
        height="auto"
        :sort-config="{ multiple: true, trigger: 'cell' }"
      >
        <vxe-column fixed="left" type="checkbox" :width="50"></vxe-column>
        <vxe-column
          fixed="left"
          type="seq"
          :width="60"
          title="序号"
        ></vxe-column>
        <vxe-column
          sortable
          v-for="(item, index) in computedHeades"
          :field="item.field"
          :title="item.title"
          :key="index"
          :params="{ name: item.title }"
          :width="item.width ? item.width : ''"
          :type="item.type ? item.type : ''"
          :fixed="
            item.left_flag == true
              ? 'left'
              : item.right_flag == true
              ? 'right'
              : item.center_flag == true
              ? ''
              : ''
          "
        >
          <!-- 预约管理-预约模式 -->
          <template v-if="item.field === 'appointmentType'" #default="{ row }">
            {{
              row.appointmentType == 0
                ? "单次播放"
                : row.appointmentType == 1
                ? "每天播放"
                : row.appointmentType == 2
                ? "每周播放"
                : row.appointmentType == 3
                ? "每月播放"
                : row.appointmentType == 4
                ? "循环播放"
                : ""
            }}
          </template>
          <!-- 预约管理-播放模式 -->
          <template v-if="item.field === 'playType'" #default="{ row }">
            {{ row.playType == 0 ? "计次" : row.playType == 1 ? "计时" : "" }}
          </template>
          <!-- 预约管理-次数/时长 -->
          <template v-if="item.field === 'playCount'" #default="{ row }">
            {{
              row.playType == 0
                ? row.playCount + "次"
                : row.playCount == 1
                ? row.playCount + "分钟"
                : ""
            }}
          </template>
          <!-- 预约管理-运行状态 -->
          <template
            #default="{ row }"
            v-if="
              router.currentRoute.value.fullPath == '/yygl' &&
              item.field == 'triggerStatus'
            "
          >
            <span
              :style="{ color: row.triggerStatus == 0 ? 'red' : '#409EFF' }"
              >{{ row.triggerStatus == 0 ? "停止" : "开始" }}</span
            >
          </template>
          <!-- 呼叫记录-是否接听 -->
          <template
            v-if="title == '呼叫记录' && item.field === 'status'"
            #default="{ row }"
          >
            {{ row.status == 1 ? "已接" : row.status == 0 ? "未接" : "" }}
          </template>
        </vxe-column>
        <vxe-column fixed="right" title="操作" width="200">
          <template #default="{ row }">
            <!-- v-if="row.CallResult !== '未接'" -->
            <el-button
              v-for="(item, index) in caozuoList"
              :key="item"
              link
              type="primary"
              @click="caozuoClick(item.caozuoType, row)"
            >
              <span>{{ item.label }}</span>
            </el-button>
            <el-button
              type="primary"
              v-if="
                row.triggerStatus == 0 &&
                router.currentRoute.value.fullPath == '/yygl'
              "
              link
              @click="caozuoClick('startPlan', row)"
            >
              <span>开始计划</span>
            </el-button>
            <el-button
              type="primary"
              v-if="
                row.triggerStatus == 1 &&
                router.currentRoute.value.fullPath == '/yygl'
              "
              link
              @click="caozuoClick('stopPlan', row)"
            >
              <span>停止计划</span>
            </el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div style="position: absolute; bottom: 18px">
      <!-- <el-pagination
          v-model:current-page="state.pageconfig.currentPage"
          v-model:page-size="state.pageconfig.pageSize"
          :page-sizes="[10, 20, 30, 50, 100]"
          :size="size"
          background
          layout="prev, pager, next, sizes, jumper, total"
          :total="state.pageconfig.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        /> -->
      <vxe-pager
        class="vxePager"
        @page-change="pagechange"
        border
        background
        align="left"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'NextJump',
          'Sizes',
          'FullJump',
          'Total',
        ]"
        v-model:current-page="state.pageconfig.currentPage"
        v-model:page-size="state.pageconfig.pageSize"
        :total="state.pageconfig.total"
      >
      </vxe-pager>
    </div>
    <!-- 表格设置 -->
    <vxe-modal
      @close="state.open_pageSet = false"
      esc-closable
      destroy-on-close
      :lock-view="false"
      :width="1000"
      :height="680"
      v-model="state.open_pageSet"
      resize
      :mask="true"
    >
      <template #title>
        <div class="w100 h100 fsc" style="">表格设置</div>
      </template>

      <template #default>
        <div class="w100 fbc">
          <div>
            <span>显示边框</span>
            <vxe-switch v-model="state.tableBorder"></vxe-switch>
          </div>
          <div>
            <span>表头颜色</span>
            <vxe-switch v-model="state.tableHeader"></vxe-switch>
            <el-color-picker v-model="state.headerColor" size="small" />
          </div>
          <div>
            <span>间隔行颜色</span>
            <vxe-switch v-model="state.tableBanmachange"></vxe-switch>
            <el-color-picker
              @change="banmaColorFn"
              v-model="state.banmaColor"
              size="small"
            />
          </div>
          <div>
            <el-dropdown
              @command="tablemiduFn"
              ref="dropdown1"
              style="margin-right: 20px"
            >
              <div style="display: flex; align-items: center; cursor: pointer">
                <span>表格密度</span>
                <img
                  style="vertical-align: middle; margin-left: 5px"
                  src="@/assets/guangboimg/表格密度.png"
                  alt=""
                />
                <span style="margin-left: 5px">{{
                  state.tableHeight == "56"
                    ? "宽松"
                    : state.tableHeight == "48"
                    ? "默认"
                    : state.tableHeight == "40"
                    ? "紧凑"
                    : ""
                }}</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="kuanson">宽松</el-dropdown-item>
                  <el-dropdown-item command="zhondeng">默认</el-dropdown-item>
                  <el-dropdown-item command="jincou">紧凑</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <el-dropdown
            @command="tablezihaoFn"
            ref="dropdown1"
            style="margin-right: 20px"
          >
            <div style="display: flex; align-items: center; cursor: pointer">
              <span>表格字号</span>
              <img
                style="vertical-align: middle; margin-left: 5px"
                src="@/assets/guangboimg/字号.png"
                alt=""
              />
              <span style="margin-left: 5px">{{
                state.tableZihao + "px"
              }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="teda">特大 18px</el-dropdown-item>
                <el-dropdown-item command="zhondeng"
                  >中等 16px</el-dropdown-item
                >
                <el-dropdown-item command="moren">默认 14px</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="" style="margin-top: 8px">
          <vxe-table
            :style="{ fontSize: state.tableZihao + 'px' }"
            :row-style="rowStyle"
            :header-cell-style="headerCellStyle"
            show-overflow
            :row-config="{ height: state.tableHeight }"
            height="520px"
            ref="xGridDialog"
            :data="state.tableContent"
            :border="state.tableBorder ? true : 'false'"
          >
            <vxe-column title="拖动排序" field="" align="center">
              <template #default="{ row }">
                <img
                  class="rowSortable"
                  src="@/assets/guangboimg/排序.png"
                  alt=""
                />
              </template>
            </vxe-column>
            <vxe-column title="列名" field="title" align="center"></vxe-column>
            <vxe-column title="是否显示" field="show" align="center">
              <template #default="{ row }">
                <vxe-switch
                  v-model="row.show"
                  :close-value="0"
                  :open-value="1"
                  open-label="是"
                  close-label="否"
                ></vxe-switch>
              </template>
            </vxe-column>
            <vxe-column title="是否固定" field="" align="center">
              <template #default="{ row }">
                <span class="tableGuding" v-if="row.left_flag">固定左侧</span>
                <img
                  @click="gudingFn(row, 'left')"
                  v-else
                  class="tableGuding image"
                  src="@/assets/guangboimg/固定左侧.png"
                  alt=""
                />
                <span class="tableGuding" v-if="row.center_flag">不固定</span>
                <img
                  @click="gudingFn(row, 'center')"
                  v-else
                  class="tableGuding image"
                  src="@/assets/guangboimg/不固定.png"
                  alt=""
                />
                <span class="tableGuding" v-if="row.right_flag">固定右侧</span>
                <img
                  @click="gudingFn(row, 'right')"
                  v-else
                  class="image"
                  src="@/assets/guangboimg//固定右侧.png"
                  alt=""
                />
              </template>
            </vxe-column>
            <vxe-column title="列宽" field="width" align="center">
              <template #default="{ row }">
                <vxe-input
                  @change="liekuanChangeFn(row)"
                  v-model="row.width"
                  placeholder="请输入列宽"
                ></vxe-input>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <div style="text-align: right; margin: 15px 0 0 0">
          <el-button @click="saveSet" type="primary">保存</el-button>
          <el-button @click="state.open_pageSet = false">取消</el-button>
        </div>
      </template>
    </vxe-modal>
    <!-- 打印设置 -->
    <vxe-modal
      @close="state.dayinSetFlag = false"
      esc-closable
      destroy-on-close
      :lock-view="false"
      :width="1200"
      :height="850"
      v-model="state.dayinSetFlag"
      resize
      :mask="true"
    >
      <template #title>
        <div class="w100 h100 fsc" style="">打印设置</div>
      </template>
      <tablePrintSet
        ref="printSetRef"
        @titleShowFn="titleShowFn"
        @closeFn="closeFn"
        @cancleFn="cancleFn"
        :state2="state2"
      ></tablePrintSet>
    </vxe-modal>
    <!-- 打印 -->
    <div style="display: none" id="mytable1">
      <vxe-table
        ref="xGrid"
        :data="state.tableDataAll"
        :style="{
          fontSize: state.tableZihao + 'px',
        }"
        :row-style="rowStyle"
        :header-cell-style="headerCellStyle"
        @resizable-change="resizeChange"
        @checkbox-change="checkchange"
        @checkbox-all="checkall"
        column-key
        :border="state.tableBorder ? true : 'false'"
        :row-config="{ height: state.tableHeight }"
        :height="router.currentRoute.value.fullPath == '/yygl' ? '480px' : ''"
        :sort-config="{ multiple: true, trigger: 'cell' }"
      >
        <vxe-column fixed="left" type="checkbox" :width="50"></vxe-column>
        <vxe-column
          fixed="left"
          type="seq"
          :width="60"
          title="序号"
        ></vxe-column>
        <vxe-column
          sortable
          v-for="(item, index) in computedHeades"
          :field="item.field"
          :title="item.title"
          :key="index"
          :params="{ name: item.title }"
          :width="item.width ? item.width : ''"
          :type="item.type ? item.type : ''"
          :fixed="
            item.left_flag == true
              ? 'left'
              : item.right_flag == true
              ? 'right'
              : item.center_flag == true
              ? ''
              : ''
          "
        >
          <!-- 预约管理-预约模式 -->
          <template v-if="item.field === 'appointmentType'" #default="{ row }">
            {{
              row.appointmentType == 0
                ? "单次播放"
                : row.appointmentType == 1
                ? "每天播放"
                : row.appointmentType == 2
                ? "每周播放"
                : row.appointmentType == 3
                ? "每月播放"
                : row.appointmentType == 4
                ? "循环播放"
                : ""
            }}
          </template>
          <!-- 预约管理-播放模式 -->
          <template v-if="item.field === 'playType'" #default="{ row }">
            {{ row.playType == 0 ? "计次" : row.playType == 1 ? "计时" : "" }}
          </template>
          <!-- 预约管理-次数/时长 -->
          <template v-if="item.field === 'playCount'" #default="{ row }">
            {{
              row.playType == 0
                ? row.playCount + "次"
                : row.playCount == 1
                ? row.playCount + "分钟"
                : ""
            }}
          </template>
          <!-- 预约管理-运行状态 -->
          <template
            #default="{ row }"
            v-if="
              router.currentRoute.value.fullPath == '/yygl' &&
              item.field == 'triggerStatus'
            "
          >
            <span
              :style="{ color: row.triggerStatus == 0 ? 'red' : '#409EFF' }"
              >{{ row.triggerStatus == 0 ? "停止" : "开始" }}</span
            >
          </template>
          <!-- 呼叫记录-是否接听 -->
          <template
            v-if="title == '呼叫记录' && item.field === 'status'"
            #default="{ row }"
          >
            {{ row.status == 1 ? "已接" : row.status == 0 ? "未接" : "" }}
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <!-- 导出 -->
    <div style="opacity: 0">
      <vxe-table
        ref="xGrid99"
        :data="state.tableDataAll"
        :style="{
          fontSize: state.tableZihao + 'px',
        }"
        :row-style="rowStyle"
        :header-cell-style="headerCellStyle"
        @resizable-change="resizeChange"
        @checkbox-change="checkchange"
        @checkbox-all="checkall"
        use-key
        :border="state.tableBorder ? true : 'false'"
        :cell-config="{ height: state.tableHeight }"
        height="auto"
        :sort-config="{ multiple: true, trigger: 'cell' }"
      >
        <vxe-column fixed="left" type="checkbox" :width="50"></vxe-column>
        <vxe-column
          fixed="left"
          type="seq"
          :width="60"
          title="序号"
        ></vxe-column>
        <vxe-column
          sortable
          v-for="(item, index) in computedHeades"
          :field="item.field"
          :title="item.title"
          :key="index"
          :params="{ name: item.title }"
          :width="item.width ? item.width : ''"
          :type="item.type ? item.type : ''"
          :fixed="
            item.left_flag == true
              ? 'left'
              : item.right_flag == true
              ? 'right'
              : item.center_flag == true
              ? ''
              : ''
          "
        >
          <!-- 预约管理-预约模式 -->
          <template v-if="item.field === 'appointmentType'" #default="{ row }">
            {{
              row.appointmentType == 0
                ? "单次播放"
                : row.appointmentType == 1
                ? "每天播放"
                : row.appointmentType == 2
                ? "每周播放"
                : row.appointmentType == 3
                ? "每月播放"
                : row.appointmentType == 4
                ? "循环播放"
                : ""
            }}
          </template>
          <!-- 预约管理-播放模式 -->
          <template v-if="item.field === 'playType'" #default="{ row }">
            {{ row.playType == 0 ? "计次" : row.playType == 1 ? "计时" : "" }}
          </template>
          <!-- 预约管理-次数/时长 -->
          <template v-if="item.field === 'playCount'" #default="{ row }">
            {{
              row.playType == 0
                ? row.playCount + "次"
                : row.playCount == 1
                ? row.playCount + "分钟"
                : ""
            }}
          </template>
          <!-- 预约管理-运行状态 -->
          <template
            #default="{ row }"
            v-if="
              router.currentRoute.value.fullPath == '/yygl' &&
              item.field == 'triggerStatus'
            "
          >
            <span
              :style="{ color: row.triggerStatus == 0 ? 'red' : '#409EFF' }"
              >{{ row.triggerStatus == 0 ? "停止" : "开始" }}</span
            >
          </template>
          <!-- 呼叫记录-是否接听 -->
          <template
            v-if="title == '呼叫记录' && item.field === 'status'"
            #default="{ row }"
          >
            {{ row.status == 1 ? "已接" : row.status == 0 ? "未接" : "" }}
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>
<script setup>
import { nextTick, onMounted, reactive } from "vue";
import axios from "@/utils/request";
import usepagesStore from "@/store/modules/pages";
import { useRouter } from "vue-router";
import Sortable from "sortablejs";
import dayjs from "dayjs";
import tablePrintSet from "./table-print-set";
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
import printJS from "print-js";
const { proxy } = getCurrentInstance();
let xGridDialog = ref(null);
let xGrid = ref(null);
let xGrid99 = ref(null);
let router = useRouter();
const userStore = usepagesStore();
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  tableheads_show: {
    default: () => [],
    require: true,
  },
  listUrl: {
    type: String,
    default: "",
  },
  caozuoList: {
    type: Array,
    default: () => [],
  },
});
let state = reactive({
  pageconfig: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
  tableData: [],
  tableDataAll: [],
  searchData: {},
  tableContent: props.tableheads_show,
  //表格设置
  open_pageSet: false,
  tableSetFlag: false,
  tableBorder: true,
  tableHeader: true,
  tableBanmachange: true,
  tableZihao: 14,
  tableHeight: "48",
  headerColor: "#F3F3F3", //表头颜色
  banmaColor: "#FAFAFA", //间隔行颜色
  //打印设置
  dayinSetFlag: false,
});
let state2 = reactive({
  tableTitle: state.tableContent,
  tableData: [],
  // tableTitle: [],
  fontSet: [
    {
      title: "标题栏",
      fontFamily: "新宋体",
      fontSize: "22px",
      fontAlign: "center",
    },
    {
      title: "副标题",
      fontFamily: "新宋体",
      fontSize: "16px",
      fontAlign: "center",
    },
    {
      title: "内容",
      fontFamily: "新宋体",
      fontSize: "10.5px",
      fontAlign: "center",
    },
    {
      title: "签名栏",
      fontFamily: "微软雅黑",
      fontSize: "16px",
      fontAlign: "right",
    },
  ],
  signData: [
    { text: "制表人" },
    { text: "" },
    { text: "" },
    { text: "" },
    { text: "" },
    { text: "" },
    { text: "" },
    { text: "" },
  ],
  titleSet: props.title,
  pageSet: {
    type: "A4竖版",
    top: 0.5,
    bottom: 0.5,
    left: 0.5,
    right: 0.5,
  },
});
function getTableHeight() {
  if (router.currentRoute.value.fullPath == "/xtsz/fq") {
    return `calc(100% - 142px)`;
  } else {
    return `calc(100% - 110px)`;
  }
}
setTimeout(() => {
  state2.tableData = state.tableData;
  state2.tableTitle = state.tableContent;
}, 500);
const emit = defineEmits([
  // "pagechange",
  // "delAllFn",
  // "delFn",
  // "xiugai",
  // "shanchu",
  // "tiaozheng",
  // "qiehuanFn",
  // "rizhiFn",
  // "yuyueqiehuanFn",
  // "tablePrintFn",
]);
// 多选事件
const handleSelectionChange = (selection) => {
  // state.selectedRows = selection
  userStore.records = selection;
  console.log("多选:", userStore.records);
};
//分页
// function handleSizeChange(val) {
//   // console.log(val, "当前页");
//   state.pageconfig.pageSize = val;
//   getList();
// }
// function handleCurrentChange(val) {
//   // console.log(val, "当前页");
//   state.pageconfig.currentPage = val;
//   getList();
// }
function pagechange(e) {
  console.log(e, "e");
  state.pageconfig.currentPage = e.currentPage;
  state.pageconfig.pageSize = e.pageSize;
  getList();
}
// 操作按钮
function caozuoClick(type, row) {
  // 获取到该行的数据
  emit(type, row);
}
//表格右侧操作
function addFn() {
  emit("addFn");
}
function delAllFn() {
  emit("delAllFn");
}
//导出
function getdcList(val) {
  let name = `${props.title}`;
  let obj = {};
  if (val == "dangqian") {
    obj.pageNum = state.pageconfig.currentPage;
    obj.pageSize = state.pageconfig.pageSize;
  } else {
    obj.pageNum = 1;
    obj.pageSize = 9999;
  }
  axios
    .post(props.listUrl, {
      ...obj,
      ...state.searchData,
    })
    .then((res) => {
      if (res.data?.list?.length >= 0) {
        state.tableDataAll = res.data.list;
        setTimeout(() => {
          // let xlsxParam = { raw: true }; //此行代码可解决导出时时间，身份证错乱问题
          // const ws = XLSX.utils.table_to_sheet(
          //   document.getElementById("daochuArea"),
          //   xlsxParam
          // );
          // /* 新建工作簿并添加工作表 */
          // const wb = XLSX.utils.book_new();
          // XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
          // /* 生成Excel文件 */
          // const wbout = XLSX.write(wb, { bookType: "xlsx", type: "binary" });
          // /* 字符串转ArrayBuffer */
          // function s2ab(s) {
          //   const buf = new ArrayBuffer(s.length);
          //   const view = new Uint8Array(buf);
          //   for (let i = 0; i !== s.length; ++i)
          //     view[i] = s.charCodeAt(i) & 0xff;
          //   return buf;
          // }
          // /* 保存文件 */
          // FileSaver.saveAs(
          //   new Blob([s2ab(wbout)], { type: "application/octet-stream" }),
          //   val=='dangqian'?props.title:props.title+"全部数据" + ".xlsx"
          // );

          let $table = xGrid99.value;
          $table.exportData({
            filename: val == "dangqian" ? name : name + "-全部数据",
            sheetName: "Sheet1",
            type: "xlsx",
            sheetMethod: ({ worksheet }) => {
              console.log(worksheet, "worksheet");
              // 设置所有行高为15px
              worksheet.eachRow((row) => {
                row.height = 15;
              });
            },
          });
        }, 1000);
      }
    });
}
function daochu(type) {
  if (type == "dangqian") {
    getdcList(type);
  } else {
    getdcList(type);
  }
}
//打印
function getdyList(val) {
  let obj = {};
  if (val == "dangqian") {
    obj.pageNum = state.pageconfig.currentPage;
    obj.pageSize = state.pageconfig.pageSize;
  } else {
    obj.pageNum = 1;
    obj.pageSize = 9999;
  }
  axios
    .post(props.listUrl, {
      ...obj,
      ...state.searchData,
    })
    .then((res) => {
      if (res.data?.list?.length >= 0) {
        state.tableDataAll = res.data.list;
        setTimeout(() => {
          let printStyle = `
    .vxe-table {
      color: #000000; // 修改表格默认颜色
      font-size: 12px; // 修改表格默认字体大小
      font-family: "Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu; // 修改表格默认字体
    }
    .vxe-table,
    .vxe-table thead th,
    .vxe-table tbody td,
    .vxe-table tfoot td  {
      border-color: #000000; // 修改表格边框颜色
    }
    .vxe-table thead th {
      color: black; // 修改表头字体颜色
      font-size: 14px; // 修改表头默认字体大小
    }
    .vxe-table tfoot td {
      color: red; // 修改表尾字体颜色
    }
    .dates0{
      text-align:${state2.fontSet[0].fontAlign};
      font-family: ${state2.fontSet[0].fontFamily};
      font-size: ${state2.fontSet[0].fontSize};
      margin:15px 0;
      font-weight:700;
    }
    .dates1{
      text-align:${state2.fontSet[1].fontAlign};
      font-family: ${state2.fontSet[1].fontFamily};
      font-size: ${state2.fontSet[1].fontSize};
      margin:15px 0;
      font-weight:700;
    }
       .dates2{
  text-align:right;
    }
    .dates3{
      position:relative;
      margin-top:30px;
      list-style:none;
      .dates4{
        margin:20px 0;
        text-align:${state2.fontSet[3].fontAlign};
      font-family: ${state2.fontSet[3].fontFamily};
      font-size: ${state2.fontSet[3].fontSize};
      }
    }
    `;
          let topHtml = `
      <div class="dates0">${state2.titleSet}</div>
      <div class="dates1"></div>
      `;
          let bottomHtml = `
      <ul class="dates3"">
        ${state2.signData
          .map((item) => {
            if (item.text != "") {
              return `<li class="dates4"> ${item.text}  :_____________</li>`;
            }
          })
          .join("")}
        </ul>
      <div class="dates2">打印日期：${dayjs().format("YYYY-MM-DD")}</div>
      `;
          const $table = xGrid.value;
          if ($table) {
            $table.print({
              // sheetName:store.state.pages.tabs,
              style: printStyle,
              beforePrintMethod: ({ content }) => {
                return topHtml + content + bottomHtml;
              },
            });
          }
        }, 1000);
      }
    });
}
function dayin(type) {
  if (type == "dangqian") {
    getdyList(type);
  } else if (type == "quanbu") {
    getdyList(type);
  } else if (type == "shezhi") {
    state.dayinSetFlag = true;
  }
}
function cancleFn() {
  state.dayinSetFlag = false;
  saveSet();
}
function closeFn() {
  state.dayinSetFlag = false;
}
function titleShowFn(val) {
  state.tableContent = val;
}
//表格设置
function saveSet() {
  //表格设置保存
  // const { fullColumn } = xGrid.value.getTableColumn()
  // setHeaders(fullColumn)
  state.open_pageSet = false;
  localStorage.setItem(
    `${props.title}_ShowBorders`,
    JSON.stringify(state.tableBorder)
  ); //显示边框
  localStorage.setItem(
    `${props.title}_ShowHeader`,
    JSON.stringify(state.tableHeader)
  ); //表头颜色是否显示
  localStorage.setItem(
    `${props.title}_ShowHeaderColor`,
    JSON.stringify(state.headerColor)
  ); //表头颜色
  localStorage.setItem(
    `${props.title}_ShowHeight`,
    JSON.stringify(state.tableHeight)
  ); //表格密度
  localStorage.setItem(
    `${props.title}_ShowZihao`,
    JSON.stringify(state.tableZihao)
  ); //表格字号
  localStorage.setItem(
    `${props.title}_ZebraPatternTable`,
    JSON.stringify(state.tableBanmachange)
  ); //斑马纹表格
  localStorage.setItem(
    `${props.title}_banmaColor`,
    JSON.stringify(state.banmaColor)
  ); //斑马纹颜色
  localStorage.setItem(
    `${props.title}_DataRefresh`,
    JSON.stringify(state.tableDataRefresh)
  ); //实时数据手动/自动刷新
  // localStorage.setItem(
  //   `${props.title}_tableContent`,
  //   state.tableContent
  //     ? JSON.stringify(state.tableContent)
  //     : JSON.stringify(props.tableheads_show)
  // );
  axios
    .post("/vxeheaders/setHeaders", {
      headers: state.tableContent,
    })
    .then((res) => {
      if (res.code == 200) {
        proxy.$modal.msgSuccess("设置成功！");
      }
    });
}
function columnDrop(dom) {
  //拖拽行
  Sortable.create(dom.$el.querySelector(".vxe-table--body tbody"), {
    handle: ".rowSortable", //只有包含.rowSortable 样式的元素才可以被拖动
    onEnd: ({ newIndex, oldIndex }) => {
      const currRow = state.tableContent.splice(oldIndex, 1)[0];
      state.tableContent.splice(newIndex, 0, currRow);
    },
  });
}
const pageSet = () => {
  state.tableContent.forEach((item) => {
    item.show = item.show == true ? 1 : 0;
  });
  state.open_pageSet = true;
  nextTick(() => {
    columnDrop(xGridDialog.value);
  });
};
function tablemiduFn(e) {
  //表格密度
  if (e == "kuanson") {
    state.tableHeight = 56;
  } else if (e == "zhondeng") {
    state.tableHeight = 48;
  } else if (e == "jincou") {
    state.tableHeight = 40;
  }
}
function banmaColorFn(e) {
  //间隔行颜色
  if (e == null) {
    state.banmaColor = "#FAFAFA";
  } else {
    state.banmaColor = e;
  }
}
const rowStyle = ({ rowIndex }) => {
  //间隔行颜色
  if (state.tableBanmachange) {
    if (rowIndex % 2 !== 0) {
      return {
        backgroundColor: state.banmaColor,
        // color: '#ffffff'
      };
    }
  }
};
const headerCellStyle = ({ column }) => {
  //表头颜色
  if (state.tableHeader) {
    if (column) {
      return {
        backgroundColor: state.headerColor,
        // color: '#ffffff'
      };
    }
  }
};

function tablezihaoFn(e) {
  if (e == "teda") {
    state.tableZihao = 18;
  } else if (e == "zhondeng") {
    state.tableZihao = 16;
  } else if (e == "moren") {
    state.tableZihao = 14;
  }
}
//是否固定
function gudingFn(row, val) {
  // 是否固定
  if (val == "left") {
    row.left_flag = true;
    row.center_flag = false;
    row.right_flag = false;
  }
  if (val == "center") {
    row.left_flag = false;
    row.center_flag = true;
    row.right_flag = false;
  }
  if (val == "right") {
    row.left_flag = false;
    row.center_flag = false;
    row.right_flag = true;
  }

  state.tableContent.forEach((item, index) => {
    if (item.title == row.title) {
      state.tableContent.splice(index, 1);
      setTimeout(() => {
        if (val == "left") {
          state.tableContent.unshift(row);
        } else if (val == "center") {
          state.tableContent.push(row);
        } else if (val == "right") {
          state.tableContent.push(row);
        }
      }, 50);
    }
  });
}
//列宽
function liekuanChangeFn(row) {
  state.tableContent.forEach((item, index) => {
    if (item.title == row.title) {
      state.tableContent.splice(index, 1);
      setTimeout(() => {
        if (index == 0) {
          state.tableContent.unshift(item);
        } else {
          state.tableContent.splice(index, 0, item);
        }
      }, 50);
    }
  });
}
function resizeChange(e) {
  const { fullColumn } = e.$table.getTableColumn();
  fullColumn[e.columnIndex].width = fullColumn[e.columnIndex].renderWidth;
  // setHeaders(fullColumn)
  fullColumn.forEach((item) => {
    //props.tableheads
    state.tableContent.forEach((item2) => {
      if (item.title == item2.title) {
        item2.width = item.width;
      }
    });
  });
  saveSet();
}
function checkall(e) {
  userStore.records = e.records;
}
function checkchange(e) {
  userStore.records = e.records;
}
watch(
  () => props.tableheads_show,
  (newVal, oldVal) => {
    state.tableContent = newVal;
    console.log(state.tableContent, "state.tableContent");
  }
);
//表格设置
let computedHeades = computed(() => {
  //动态显隐表头
  console.log(state.tableContent, "computed动态显隐表头");
  console.log(props.tableheads_show, "props.tableheads_show999");
  return state.tableContent.filter((i) => i.show == true || i.show === 1);
});
function getList() {
  axios
    .post(props.listUrl, {
      pageNum: state.pageconfig.currentPage,
      pageSize: state.pageconfig.pageSize,
      ...state.searchData,
    })
    .then((res) => {
      if (res.data?.list?.length >= 0) {
        state.tableData = res.data.list;
        state.pageconfig.total = res.data.total;
      }
    });
}
defineExpose({ state, getList });
onMounted(() => {
  console.log(router.currentRoute.value.fullPath, "当前路由");
  let tableBorder = localStorage.getItem(`${props.title}_ShowBorders`);
  if (tableBorder) {
    //边框
    state.tableBorder = JSON.parse(tableBorder);
  }
  let tableHeader = localStorage.getItem(`${props.title}_ShowHeader`);
  if (tableHeader) {
    //表头颜色是否显示
    state.tableHeader = JSON.parse(tableHeader);
  }
  let tableHeaderColor = localStorage.getItem(`${props.title}_ShowHeaderColor`);
  if (tableHeaderColor) {
    //表头颜色
    state.headerColor = JSON.parse(tableHeaderColor);
  }
  let tableBanmachange = localStorage.getItem(
    `${props.title}_ZebraPatternTable`
  );
  if (tableBanmachange) {
    //斑马纹是否显示
    state.tableBanmachange = JSON.parse(tableBanmachange);
  }
  let banmaColor = localStorage.getItem(`${props.title}_banmaColor`);
  if (banmaColor) {
    //斑马纹颜色
    state.banmaColor = JSON.parse(banmaColor);
  }
  let tableHeight = localStorage.getItem(`${props.title}_ShowHeight`);
  if (tableHeight) {
    //表格密度
    state.tableHeight = JSON.parse(tableHeight);
  }
  let tableZihao = localStorage.getItem(`${props.title}_ShowZihao`);
  if (tableZihao) {
    //表格字号
    state.tableZihao = JSON.parse(tableZihao);
  }
  // let tableDataRefresh = localStorage.getItem(`${props.title}_DataRefresh`);
  // if (tableDataRefresh) {
  //   //数据刷新
  //   state.tableDataRefresh = JSON.parse(tableDataRefresh);
  // }
  let bendiVal = localStorage.getItem(`${props.title}_tableContent`);
  if (bendiVal) {
    //表格内容
    state.tableContent = []; //先清空再赋值，否则dom不改变
    setTimeout(() => {
      state.tableContent = JSON.parse(bendiVal);
      state2.tableTitle = JSON.parse(bendiVal);
    }, 50);
    console.log(state.tableContent, "state.tableContent999");
  }
  let localPrintSet = localStorage.getItem(`${props.title}_printSet`);
  if (!localPrintSet) return;
  const { fontSet, pageSet, signData, titleSet, tableTitle, tableData } =
    JSON.parse(localPrintSet);
  state2.fontSet = fontSet;
  state2.pageSet = pageSet;
  state2.signData = signData;
  state2.titleSet = titleSet;
});
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0 20px 20px;
}
::v-deep .el-switch {
  margin: 0 5px;
}
.vxe-top {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  .top-1 {
    font-weight: 700;
  }
  .top-2 {
    margin-left: 15px;
    font-size: 14px;
  }
  .right-caozuo {
    display: flex;
    align-items: center;
  }
}
</style>
<style>
</style>